<template>
    <div class="singer_info">
        <div class="cover" v-lazy:background-image="cover">
            <div class="singer">
                <div class="singer_name">{{singername}}</div>
                <div class="btn">关注</div>
            </div>
        </div>
        <div class="music_list">
            <song-item
                v-for="item in list"
                :key="item.id"
                :title="item.filename"
                :hash="item.hash"
            />
        </div>
        <div class="singer_btn_bar">
            查看更多
        </div>
    </div>
</template>

<script>
import SongItem from 'Components/SongItem'
import { ref, onBeforeMount } from 'vue'
import { getSingerInfo } from 'Api/singer'
import { createImageUrl } from 'Utils/utils'
export default {
    name: 'SingerInfo',
    components: { SongItem },
    props: ['singerid'],
    setup (props) {
        const cover = ref('')
        const singername = ref('')
        const list = ref([])

        onBeforeMount(async () => {
            const singerid = props.singerid
            const data = await getSingerInfo(singerid)
            cover.value = createImageUrl(data.info.imgurl)
            singername.value = data.info.singername
            list.value = data.songs.list
        })

        return {
            cover,
            singername,
            list,
            createImageUrl
        }
    }
}
</script>

<style lang="scss" scoped>
.cover {
    position: relative;
    height: 240px;
    background: {
        repeat: no-repeat;
        size: cover;
        position: center center;
    }
    &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.3);
    }
    .singer {
        position: absolute;
        top: 15%;
        left: 4.2%;
        z-index: 2;
        width: 100px;
        height: 100%;
        color: #fff;
        .singer_name {
            font-size: 1.6rem;
        }
        .btn {
            display: inline-block;
            vertical-align: top;
            padding: 3px 10px;
            line-height: 15px;
            border: 1px solid rgba(255,255,255,.6);
            border-radius: 10.5px;
            background: rgba(0,0,0,.3);
            margin-top: 10px;
        }
    }
}
.music_list {
    height: 100px;
    margin-top: -15px;
    padding-top: 10px;
    background: #fff;
    border-radius: 10px;
}
.singer_btn_bar {
    position: fixed;
    left: calc((100% - 200px) / 2);
    bottom: 20px;
    width: 200px;
    height: 40px;
    background: #3c90f7;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
    border-radius: 24px;
}
</style>
